<template>
  <div>
    <wraptitle>
      <template v-slot:view-title>时段/专家</template>
    </wraptitle>
    <div class="timeslot-experts-wrap">
      <div class="table-wrap">
        <div class="action-btn-wrap" v-if="display">
          <span @click="newTimeslot"
            ><i class="el-icon-circle-plus"></i> 新增时段</span
          >
        </div>
        <el-table
          :data="timeslotList"
          border
          stripe
          size="mini"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="时段名称"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="timeslot_count"
            label="职业规划数量"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" min-width="138">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="70">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status == '1' ? 'success' : 'danger'"
                size="mini"
              >
                {{ formatStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                circle
                :disabled="disabled"
                @click="updateTimeslot(scope.row)"
              >
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                :disabled="disabled"
                @click="deleteTimeslot(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="table-wrap">
        <div class="action-btn-wrap" v-if="display">
          <span @click="newExperts"
            ><i class="el-icon-circle-plus"></i> 新增专家</span
          >
        </div>
        <el-table
          :data="expertsList"
          border
          stripe
          size="mini"
          style="width: 100%"
        >
          <el-table-column
            prop="experts_name"
            label="专家名称"
            show-overflow-tooltip
            min-width="80"
          >
          </el-table-column>
          <el-table-column
            prop="careerplan_count"
            label="职业规划数量"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" min-width="128">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="70" fixed="right">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status == 1 ? 'success' : 'danger'"
                size="mini"
              >
                {{ formatExpertsStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="56">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                :disabled="disabled"
                @click="deleteExperts(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import wraptitle from '@/components/content/WrapTitle'
import * as config from '@/network/config'
import { getExperts, getTimesLotList } from '@/network/index'

export default {
  name: 'timeslot',
  data() {
    return {
      timeslotList: [],
      expertsList: [],
      disabled: true,
      display: false
    }
  },
  created() {
    this.getTimesLotList()
    this.getExperts()
    this.display = this.roleid > 3 ? true : false
    this.disabled = this.roleid < 4 ? true : false
  },
  computed: {
    ...mapGetters(['roleid'])
  },
  components: {
    wraptitle
  },
  methods: {
    getTimesLotList() {
      getTimesLotList().then(res => {
        this.timeslotList = res.data
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
      })
    },
    getExperts() {
      getExperts().then(res => {
        this.expertsList = res.data
      })
    },
    // 添加时段
    newTimeslot() {
      this.showDialogWithInput(
        '新增时段',
        '请输入时段名称：',
        value => {
          if (!value) {
            this.$toast('时段名不能为空', 'error')
            return
          }
          config
            .addTimeslot(value)
            .then(res => {
              this.$toast('添加成功')
              this.getTimesLotList()
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        },
        ''
      )
    },
    // 修改时段
    updateTimeslot(timeslot) {
      this.showDialogWithInput(
        '修改时段',
        '请输入新的时段名称：',
        value => {
          if (!value) {
            this.$toast('时段名不能为空', 'error')
            return
          }
          if (value === timeslot.name) {
            this.$toast('时段名重复', 'error')
            return
          }
          config
            .updateTimeslot({
              timeslot_id: timeslot.timeslot_id,
              name: value
            })
            .then(data => {
              this.$toast('修改成功')
              this.getTimesLotList()
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        },
        timeslot.name
      )
    },
    // 删除时段
    deleteTimeslot(timeslot) {
      this.showDialog(
        '此操作会删除该时段，并将该时段下的职业规划移到默认时段, 是否继续?',
        () => {
          config
            .deleteTimeslot(timeslot.timeslot_id)
            .then(res => {
              if (res.code === 200) {
                this.$toast('已删除')
                this.getTimesLotList()
              } else {
                this.$toast('该时段不允许被删除！', 'error')
              }
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        }
      )
    },
    // 添加专家
    newExperts() {
      this.showDialogWithInput(
        '新增专家',
        '请输入专家名称：',
        value => {
          if (!value) {
            this.$toast('专家名不能为空', 'error')
            return
          }

          config
            .addExpert(value)
            .then(data => {
              this.$toast('添加成功')
              this.getExperts()
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        },
        ''
      )
    },
    // 删除专家
    deleteExperts(experts) {
      this.showDialog(
        '此操作会删除该专家，并将该专家的所有职业规划点评内容删除, 是否继续?',
        () => {
          config
            .deleteExpert(experts.experts_id)
            .then(res => {
              if (res.code === 200) {
                this.$toast('已删除')
                this.getExperts()
              } else {
                this.$toast('该专家不允许被删除！', 'error')
              }
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        }
      )
    },

    // 删除专家
    deleteExperts(experts) {
      this.showDialog(
        '此操作会删除该专家，并将该专家的所有职业规划点评内容删除, 是否继续?',
        () => {
          config
            .deleteExpert(experts.experts_id)
            .then(res => {
              if (res.code === 200) {
                this.$toast('已删除')
                this.getExperts()
              } else {
                this.$toast('该专家不允许被删除！', 'error')
              }
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        }
      )
    },
    // 显示弹窗操作
    showDialogWithInput(tip, labeltext, next, placeholder) {
      this.$prompt(labeltext, tip, {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputPlaceholder: placeholder
      })
        .then(({ value }) => {
          next(value)
        })
        .catch(() => {})
    },
    showDialog(tip, next) {
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          next()
        })
        .catch(() => {})
    },

    // 数据格式化处理部分
    formatStatus(value) {
      return value == '1' ? '使用中' : '已删除'
    },
    formatExpertsStatus(value) {
      return value == '1' ? '在线中' : '离线中'
    }
  }
}
</script>

<style lang="scss">
.timeslot-experts-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px;
  .table-wrap {
    position: relative;
    width: calc(50% - 10px);
    margin: 5px;
    .action-btn-wrap {
      background-color: #eee;
      padding: 5px;
      span {
        display: inline-block;
        padding: 8px 10px;
        font-size: 14px;
        cursor: pointer;
        background-color: #262a30;
        color: #fff;
        border-radius: 8px;
      }
    }
  }
}
</style>
